<!DOCTYPE html>
<html lang="en">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<head>
<!-- <%-- Echarts数据展示页面 --%> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>Individual Orders - Orders Management Display System</title>
</head>
<body>
<main>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Orders Management Display System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.html" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
            <li>
                <a href="account.html" class="nav-link dark">
                    Accounts
                </a>
            </li>
            <li>
                <a href="manage.html" class="nav-link link-dark">
                    All Orders
                </a>
            </li>
            <li>
                <a href="query.html" class="nav-link link-dark">
                    Orders Query
                </a>
            </li>
            <li>
                <a href="echarts.html" class="nav-link active">
                  Chart Display
                </a>
              </li>
            <li>
                <a href="file.html" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>

        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong id="user_name_text"></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.html">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li class="dropdown-item" id="logout">
                    Logout
                </li>
            </ul>
            <script type="text/javascript">
                const logoutButton = document.getElementById('logout')
                logoutButton.addEventListener("click", function () {
                    const request = new XMLHttpRequest()
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== "00000") {
                                alert(json.message)
                            }
                            window.location.href = "/"
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/logout", true)
                    request.send()
                })

                window.onload = function () {
                    sendCurrent()
                }

                function sendCurrent() {
                    const request = new XMLHttpRequest()
                    const usernameText = document.getElementById('user_name_text')
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== undefined) {
                                alert(json.message)
                                window.location.href = "/"
                                return
                            }
                            usernameText.innerHTML = json.username
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/current", true)
                    request.send()
                }
            </script>
        </div>
    </div>

    <div class="d-flex flex-column p-3">
        <h1>Individual Orders</h1>
        <form method="post" class="input-group">
            <span class="input-group-text">DATE</span>
            <input class="form-control text-input" type="text" placeholder="Please enter order's date" id="order-id-input">
            <button class="btn btn-primary" id="query-submit" type="button">Query</button>
            <button class="btn btn-outline-secondary" type="reset">Reset</button>
        </form>
        <br style="user-select: none">
        <hr class="dropdown-divider">
        <div id="Echarts_2" style="width: 1000px;height: 800px;" > </div>
    </div>
</main>





<script type="text/javascript">
    let names = [];
    let myData = [];

    let myChart = echarts.init(document.getElementById('Echarts_2'));
    //2)Individual Orders 。
    //通过输入订单id号，用饼状图展示当前订单的数量
    let option = {
        backgroundColor: '',    //背景色使用界面背景
        grid: {
        left: '20%'  
        },
        color: ['#2AC9FD', '#76FBC0', '#35C96E', '#FCC708', '#48B188', '#5957C2', '#4A5D73'],
        series: [
            {
                color: ['#2AC9FD', '#76FBC0', '#35C96E', '#FCC708', '#48B188', '#5957C2'],
                type: 'pie',
                radius: ['62', '100'],
                labelLine: {
                    normal: {
                        length: 25,
                        length2: 120,
                        lineStyle: {
                            type: 'solid'
                        }
                    }

                },
                label: {
                    normal: {
                        formatter: (goods)=>{   //遍历商品，获取商品名以及其比例
                            console.log(goods);
                            return '{b| '+goods.name+'}  ' + '{c|'+ goods.value +'件}'
                        },
                        borderWidth: 0,
                        borderRadius: 4,
                        padding: [0, -86],
                        height: 70,
                        fontSize: 13,
                        align: 'center',
                        color: '#3494BD',
                        rich: {
                            b: {
                                fontSize: 12,
                                lineHeight: 20,
                                color: '#41B3DC',
                                padding: [0, 0, 5, 0]
                            },
                            c: {
                                fontSize: 20,
                                lineHeight:20,
                                color: 'orange'
                            }

                        }
                    }
                },
                data: []
            }
        ]
    };
    const querySubmitButton = document.getElementById("query-submit")
    querySubmitButton.addEventListener("click", function () {
        const id = document.getElementById("order-id-input").value
        $.ajax({
            type : "post",
            async : true,
            url : "/api/order/query",
            data: {
              date : id
            },
            dataType : "json",
            success : function(data) {
                if (data.errorCode === undefined) {
                    //接收到的数据
                    let mapping = new Map()
                    for (let i in data){
                        let name = data[i].name
                        names.push(data[i].name);
                        let amount = mapping.get(name)
                        if (amount !== undefined) {
                            mapping.set(name, data[i].amount + amount)
                        } else {
                            mapping.set(name, data[i].amount)
                        }
                    }
                    let i = 0;
                    mapping.forEach(function (value, key, map) {
                        myData[i] = {
                            value: value,
                            name: key
                        };
                        i++;
                    })

                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({ //加载数据图表
                        legend: {
                            data: names
                        },
                        series : [{
                            // 根据名字对应到相应的系列
                            name : ['总计'],
                            data : myData
                        }]

                    });
                }
                else{
                    alert("失败");
                }
            },
            error : function(errorMsg) {
                console.log(errorMsg)
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    })



    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>
